<template>
    <div class="layer-manager">
        <el-checkbox-group v-model="visibleLayers" @change="handleVisibilityChange">
            <el-checkbox v-for="layer in layers" :key="layer.id" :value="layer.id">
                {{ layer.name }}
            </el-checkbox>
        </el-checkbox-group>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
    layers: Array
});

const emit = defineEmits(['layer-visibility-changed']);

const visibleLayers = ref(props.layers.filter(layer => layer.visible).map(layer => layer.id));

const handleVisibilityChange = () => {
    props.layers.forEach(layer => {
        const visible = visibleLayers.value.includes(layer.id);
        emit('layer-visibility-changed', { layerId: layer.id, visible });
    });
};

watch(() => props.layers, (newLayers) => {
    visibleLayers.value = newLayers.filter(layer => layer.visible).map(layer => layer.id);
}, { deep: true });
</script>

<style scoped>
.layer-manager {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: white;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>